<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="../jquery-1.7.2.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>

<link href="../imgdemo/css/imgareaselect-default.css" rel="stylesheet">
<script type="text/javascript" src="../imgdemo/jquery.imgareaselect.js"></script>
<script type="text/javascript">
	$('.dropdown-toggle').dropdown();
</script>

<script type="text/javascript">
	function preview(img, selection) {
		var scaleX = 100 / (selection.width || 1);
		var scaleY = 100 / (selection.height || 1);

		$('#testid').css({
			width : Math.round(scaleX * 400) + 'px',
			height : Math.round(scaleY * 300) + 'px',
			marginLeft : '-' + Math.round(scaleX * selection.x1) + 'px',
			marginTop : '-' + Math.round(scaleY * selection.y1) + 'px'
		});
	}

	$(document)
			.ready(
					function() {
						$(
								'<div><img id="testid" src="../imgdemo/img/ferret.jpg" style="position: relative;" /><div>')
								.css({
									float : 'left',
									position : 'relative',
									overflow : 'hidden',
									width : '100px',
									height : '100px'
								}).insertAfter($('#ferret'));

						$('#ferret').imgAreaSelect({
							aspectRatio : '1:1',
							onSelectChange : preview,
							onSelectEnd : function(img, selection) {
								$('input[name="x1"]').val(selection.x1);
								$('input[name="y1"]').val(selection.y1);
								$('input[name="x2"]').val(selection.x2);
								$('input[name="y2"]').val(selection.y2);
							}
						});

						//提交的四个值
						$('#btn_sub').click(function() {
							alert('x1:' + $('input[name="x1"]').val());
							alert('y1:' + $('input[name="y1"]').val());
							alert('x2:' + $('input[name="x2"]').val());
							alert('y2:' + $('input[name="y2"]').val());
						});
					});
</script>
</head>


<body>
	<!-- bar -->
	<div class="navbar">
		<div class="navbar-inner">
			<div class="span12 offset3">
				<div class="container">
					<a class="brand" href="index.html"><img
						src="img/header_logo.png">吾活着</a>
					<div class="nav-collapse">
						<ul class="nav">

							<li><a href="index5.html">解惑</a></li>
							<li><a href="http://5huozhe.com">点滴</a></li>
							<li><a href="group.html">小组</a></li>
							<li><a href="name.html">名人志</a></li>
						</ul>
						<ul class="nav pull-right">
							<li class="dropdown"><a href="#" class="dropdown-toggle"
								data-toggle="dropdown"><i class="icon-user icon-white"></i>&nbsp;明月江南<b
									class="caret"></b> </a>
								<ul class="dropdown-menu">
									<li><a href="setting_head.html"> <i class="icon-cog"></i> 个人设置</a>
									</li>
									<li class="divider"></li>
									<li><a href="#"> <i class="icon-user"></i> 退出</a>
									</li>
								</ul></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>


	<div class="container">
		<div class="span12">
			<div class="row-fluid">
				<div class="span2" style="text-align: center;">
					<img alt="" src="img/default_head.gif" />
					<div>明月江南</div>
					
					<br>
					<div>
						<ul class="nav nav-pills">
							<li><a href="my_follower.html"
								style="padding-left: 8px; padding-right: 8px;">56<br>关注</a>
							</li>
							<li><a href="follower_me.html"
								style="padding-left: 8px; padding-right: 8px;">290<br>粉丝</a>
							</li>
							<li><a href="#"
								style="padding-left: 8px; padding-right: 8px;">125<br>文章</a>
							</li>
						</ul>
					</div>
					<div >
						<a href="#" class="btn btn-success"><i class="icon-plus icon-white"></i>加关注</a>
					</div>
					<br>
					<ul class="nav nav-pills nav-stacked">
						<li><a href="my_index.html">个人首页</a>
						</li>
						<li ><a href="setting_basic.html">基本信息</a></li>
						<li class="active"><a href="setting_head.html">修改头像</a></li>
						<li><a href="setting_password.html">修改密码</a></li>
						<li><a href="send_bless.html">真情传递</a></li>

					</ul>
				</div>
				<div class="span10">
					<form class="well form-horizontal" name="" action="" method="post">
						<fieldset>
							<legend> 修改头像 </legend>
							<div class="control-group">
								<div class="controls">
									<input type="file" class="input-file" id="fileInput" size="55"/>
								</div>
							</div>
							<div class="control-group">
								<div class="controls">
									<p>
										<img id="ferret" src="../imgdemo/img/ferret.jpg"
											style="float: left; margin-right: 10px;" />
									</p>

									<input type="hidden" name="x1" value="" /> <input
										type="hidden" name="y1" value="" /> <input type="hidden"
										name="x2" value="" /> <input type="hidden" name="y2" value="" />
								</div>
							</div>
							<div class="control-group">
								<div class="controls">
									<button class="btn btn-success">确定</button>
								</div>
							</div>
						</fieldset>
					</form>
				</div>
			</div>


		</div>
	</div>


</body>
</html>